<template>
  <div class="file-mgr" v-loading.fullscreen.lock="loading">
    <page-main :pagination="pagination" @search-data="searchData" @page-change="pageChange">
      <template slot="search">
        <search-form :search="search"></search-form>
      </template>
      <template slot="append">
        <el-button type="primary" size="medium" @click="addFile">新增</el-button>
      </template>
      <template slot="table">
        <el-table fit stripe border highlight-current-row :data="fileDataList" height="100%" class="file-mgr-table">
          <el-table-column label="文件名称" prop="fileName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="文件大小" prop="size" min-width="120px" align="center"></el-table-column>
          <el-table-column label="文件类型" prop="mimeType" min-width="100px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="上传时间" width="160px" align="center">
            <template slot-scope="scope">
              <span>{{$moment(scope.row.time).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="165px" header-align="center">
            <template slot-scope="scope">
              <el-tooltip placement="bottom" :content="scope.row.qiqiuUrl">
                <el-button size="mini" type="primary" @click="loadFile(scope.row)">下载文件</el-button>
              </el-tooltip>
              <el-button v-if="scope.row.type===1" size="mini" type="danger" @click="delFile(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </page-main>

    <el-dialog title="新增文件" custom-class="sys-dialog" :close-on-click-modal="false" :visible.sync="openDialog" width="450px" top="calc(50vh - 185px)">
      <div style="height:300px;oveflow:auto">
        <file-form v-if="openDialog" @save-success="saveSuccess"></file-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import LogApi from 'services/logApi';

  import PageMain from 'commonComponents/pageMain';
  import SearchForm from './searchForm';
  import FileForm from './fileForm';

  import Pagination from 'models/pagination';
  import FileDataSearch from 'models/log/fileDataSearch';

  export default {
    data() {
      return {
        loading: false,
        search: new FileDataSearch(),
        pagination: new Pagination(),
        fileDataList: [],
        openDialog: false
      };
    },

    created() {
      this.setFileDataList(true);
    },

    methods: {
      setFileDataList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let pagination = this.pagination;
        this.loading = true;
        LogApi.getFileDataList(search, pagination).then(fileDataList => {
          if (isSearch) {
            search.setOldData();
          }
          this.fileDataList = fileDataList;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      searchData() {
        this.pagination.currentPage = 1;
        this.setFileDataList(true);
      },

      pageChange() {
        this.setFileDataList();
      },

      addFile() {
        this.openDialog = true;
      },

      saveSuccess() {
        this.openDialog = false;
        this.setFileDataList();
      },

      delFile(fileData) {
        this.$confirm('是否确定删除该文件', '删除').then(() => {
          this.toDelFile(fileData);
        }).catch(() => {});
      },

      toDelFile(fileData) {
        this.loading = true;
        LogApi.delFile(fileData).then(msg => {
          this.loading = false;
          this.$alert('该文件成功删除', '信息', {
            callback: () => {
              this.setFileDataList();
            }
          });
        }).catch(() => {
          this.loading = false;
        });
      },

      loadFile(fileData) {
        window.open(fileData.qiqiuUrl);
      }
    },

    components: {
      PageMain,
      SearchForm,
      FileForm
    }
  };

</script>

<style lang="scss" scoped>
  .file-mgr {
    height: 100%;

    .file-mgr-table {
      .el-button+.el-button {
        margin-left: 0;
      }
    }
  }

</style>
